<template>
	<view class="bar-fixed-height" style="height: 130rpx;">
		<!-- 用来处理小程序显示时的底部导航栏的覆盖的高度 -->
	</view>
	<view class="bottom-bar">
		<view class="bg-img-container">
			<image :src=" domain + '/static/Community/backImg.png'" class="bg-img" />
		</view>
		<view @click="redirectTo(item)" class="tab-bar " :style="item.position" v-for="(item,k) in row" :key="k">
			<image class="bar-icon" :src=" domain + item.img" />
			<view class="bar-text">
				{{item.title}}
			</view>
		</view>
		<view @click="redirectTo(camera)" class="tab-bar-center">
			<image class="bar-icon-center" :src=" domain + camera.img" />
		</view>
	</view>
</template>

<script setup>
	//姚珅 @ 5月18日 页面 以及个页面组件添加
	import { domain } from '../../stores/useApp.js'
	let row = [
		{
			img: "/static/Community/index.png?v2",
			title: "首页",
			url: "Community/Index",
			position: "left: calc(15% - 25rpx);"
		},
		{
			img: "/static/Community/searchRoot.png?v2",
			title: "寻根",
			url: "Community/LinSearchRoot",
			position: "left: calc(30% - 25rpx);"
			
		},
		{
			img: "/static/Community/communitySubscripts.png?v2",
			title: "社区",
			url: "Community/CommunityCommunication",
			position: "left: calc(70% - 25rpx);"
		},
		{
			img: "/static/Community/myInformation.png?v2",
			title: "我的",
			url: "ucenter/MyInformation",
			position: "left: calc(85% - 25rpx);"
		}
	]
	let camera = {
		img: "/static/Community/camera.png",
		title: "相机",
		url: "Community/AddCommunity"
	}
	function redirectTo(item) {
		let url = '/pages/' + item.url;
		uni.redirectTo({
			url
		})
	}
</script>

<style lang="less">
	@bar-text-size: 20rpx;
	@bar-text-line-height: 30rpx;

	.bottom-bar {
		height: 130rpx;
		width: 100%;
		background-position: 50% 50%;
		background-size: cover;
		position: fixed;
		bottom: 0;
		z-index: 999;
		.bg-img-container {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			.bg-img {
				width: 100%;
				height: 100%;
			}
		}
		.tab-bar {
			width: 50rpx;
			height: 80rpx;
			position: absolute;
			top: calc(50% - 40rpx);

			.bar-icon {
				width: 50rpx;
				height: 50rpx;
			}

			.bar-text {
				text-align: center;
				font-size: @bar-text-size;
				line-height: @bar-text-line-height;
				color: #fff;
			}
		}

		.tab-bar-center {
			width: 100rpx;
			height: 100rpx;

			.bar-icon-center {
				width: 100rpx;
				height: 100rpx;
				position: absolute;
				top: 0;
				left: calc(50% - 50rpx);
			}
		}

	}
</style>
